import React,{Component}from 'react'
import PropTypes from 'prop-types'



class TodoItem extends Component{
    // 优化子组件的频繁执行组件更新
    shouldComponentUpdate(nextprops,nextstate){
        console.log('componentupdate')
        if(nextprops.content !== this.props.content){
            console.log('componentupdate')
            return true
        } else {
            return false
        }
    }

    // 父组件传过来的props发生变化子组件的render也会执行
    render(){
        console.log('child render')
        const {content,index,text} = this.props
        return  <div onClick={this.handleClick.bind(this)} key={index}>{text}-{content}</div>
    }
    handleClick(){
        const {Delete,index} = this.props
        // 子组件通过this.props调用父组件传过来的方法从而修改父组件里的数据
        // console.log(this.props.index)
        Delete(index)
    }
    // 组件要接收父组件的传值时执行
    // 组件第一次存在父组件时并不执行
    // 组件已存在于父组件后才执行
    // componentWillReceiveProps(){
    //     console.log('componentWillReceiveProps')
    // }

    
    
}
// 约束父组件传过来的值的属性
TodoItem.propTypes = {
    // content: PropTypes.arrayOf(PropTypes.func,PropTypes.number),
    content:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),
    // content: PropTypes.string,
    index: PropTypes.number,
    Delete: PropTypes.func
}
// prop里值的默认值
// 如果父组件没有传值就采用这个为值
TodoItem.defaultProps = {
    text:'helloworld'
}

export default TodoItem